<template>
  <van-field
    v-model="model"
    is-link
    readonly
    name="picker"
    label="选择器"
    placeholder="点击选择城市"
    @click="isShow = true"
  />
  <van-popup v-model:show="isShow" position="bottom">
    <van-picker
      :columns="columns"
      @confirm="onConfirm"
      @cancel="isShow = false"
    />
  </van-popup>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { fieldProps } from "vant";


type Column = {
  text: String, 
  value: string
}
const props = Object.assign({
  value: {
    type: String,
    default: ''
  },
  columns: {
    type: Array<Column>,
    default: []
  },
}, fieldProps);
export default defineComponent({
  name: "Select",
  props: props,
  setup(props) {
    const model = ref(props.value);
    const isShow = ref(false);
    const onConfirm = ({ selectedOptions }) => {
      result.value = selectedOptions[0]?.text;
      showPicker.value = false;
    };
    return {
      props,
      model,
      isShow
    };
  },
});
</script>

<style lang="scss" scoped></style>

